Text Alignment is an important typography and layout property in Figma that controls how text is positioned horizontally within its text container. Proper text alignment helps create visual hierarchy, consistent layouts, readable content, balanced interfaces, and professional UI designs.
In Figma, text can commonly be aligned to the left, center, right, or justified horizontally depending on the design requirement. Text can also be positioned vertically within a text box or frame through the relevant layout and alignment controls. Understanding Text Alignment is essential for designing websites, mobile applications, dashboards, forms, cards, landing pages, navigation systems, design systems, and responsive interfaces.
Text Alignment is closely related to typography, spacing, Auto Layout, grids, responsive design, and visual hierarchy. It should not be treated as an isolated property because changing alignment can affect the visual balance, text wrapping, and behavior of an entire component.
For professional UI/UX and Figma training, visit JustAcademy Figma Training and Register for Figma Course Demo.
Text Alignment determines how text is positioned inside its text container. It controls the relationship between the text content and the boundaries of its text box or layout area.
Left Alignment
This is some text
inside a text box.
Center Alignment
This is some text
inside a text box.
Right Alignment
This is some text
inside a text box.
Alignment is one of the basic principles used to organize information and create visual consistency in UI/UX design.
Text alignment directly influences readability, hierarchy, balance, scanning speed, and the overall structure of an interface. Correct alignment makes content easier to understand and gives the design a consistent visual rhythm.
Figma provides text alignment controls when a text layer is selected. These controls are available in the text and typography controls and can be used to control the horizontal positioning of text within its text box.
Text Layer
|
v
Typography Controls
|
+-- Font Family
+-- Font Weight
+-- Font Size
+-- Line Height
+-- Letter Spacing
+-- Horizontal Alignment
+-- Other Text Settings
The commonly used horizontal text alignments are Left, Center, Right, and Justified. The appropriate alignment depends on the content, component, layout, and reading experience.
| Alignment | Description | Common Usage |
|---|---|---|
| Left | Text aligns with the left edge | Paragraphs, forms, cards, websites |
| Center | Text is centered horizontally | Hero sections, titles, empty states |
| Right | Text aligns with the right edge | Numbers, prices, selected layouts |
| Justified | Text is distributed across the available width | Editorial and document-style layouts |
Left alignment positions text along the left edge of its text container. It is one of the most commonly used alignments for UI design and long-form content.
This is a left aligned heading.
This is a paragraph of text.
Each line starts from the left edge.
Left alignment is generally easy to scan because the starting position of each line remains consistent.
Center alignment positions text around the horizontal center of the text container. It is frequently used for short headings, hero sections, empty states, onboarding screens, and promotional designs.
Welcome
to our platform
Create your account
to continue.
Center alignment works best when the content is relatively short. Long paragraphs centered across a wide area can become harder to scan.
Right alignment positions text along the right edge of the text container. It can be useful for numerical information, prices, financial data, and specific visual compositions.
Product ₹999
Product ₹799
Product ₹1,299
Right alignment should be used intentionally because large blocks of right-aligned text can be more difficult to scan than left-aligned text.
Justified alignment distributes text across the available width so that lines generally align with both the left and right edges of the text container.
This is an example of justified text
where the lines are distributed across
the available width of the text box.
Justification is more common in editorial, document, magazine, and publication-style layouts than in modern application interfaces.
| Feature | Left | Center | Right |
|---|---|---|---|
| Readability | High for long content | Best for short content | Best for selected content types |
| Common Usage | Body, forms, cards | Hero, empty states | Numbers, prices |
| Visual Style | Structured | Balanced | Formal/data-oriented |
| Long Paragraphs | Suitable | Usually not preferred | Usually not preferred |
Text alignment is especially noticeable when the text box is wider than the actual text content. The alignment determines where the text sits inside that available area.
Text Box
+--------------------------+
| Text | Left
+--------------------------+
+--------------------------+
| Text | Center
+--------------------------+
+--------------------------+
| Text | Right
+--------------------------+
Figma text resizing determines how the text box responds to its content. Text alignment determines how the content is positioned inside that text box.
| Concept | Purpose |
|---|---|
| Text Alignment | Controls text position within the text box |
| Auto Width | Allows the text box to grow horizontally |
| Auto Height | Allows the text box to grow vertically |
| Fixed Size | Keeps the text box at a defined size |
Text Alignment and Line Height work together when designing multiline text. Alignment controls the horizontal position of lines, while Line Height controls the vertical distance between lines.
Alignment
<---- Horizontal ---->
Line 1
Line 2
Line 3
Line Height
|
v
Vertical spacing between lines
Letter Spacing controls the horizontal distance between characters, while Text Alignment controls the position of the complete text content within its container.
Letter Spacing:
D E S I G N
Text Alignment:
| DESIGN |
Both properties should be evaluated together when designing typography.
Font Size changes the scale of the text, while alignment determines where the text sits within its container. Large headings may require different alignment rules from body text.
Font Weight affects the visual strength of text, while alignment affects its position. A bold centered heading can create strong visual emphasis, while a regular left-aligned paragraph creates a more traditional reading structure.
Visual hierarchy helps users understand the importance and relationship of different content elements. Alignment can reinforce hierarchy by creating clear relationships between headings, paragraphs, labels, and actions.
Centered Hero Heading
|
v
Centered Supporting Text
|
v
Centered CTA
--------------------------------
Left Section Heading
|
v
Left Paragraph
|
v
Left Content
Headings can be left-aligned, centered, or occasionally right-aligned depending on the composition. Left alignment works well for content-heavy layouts, while center alignment can work effectively for hero sections and marketing pages.
Left alignment is commonly preferred for body text because users can easily locate the beginning of each line. This creates a consistent vertical starting edge that supports scanning.
Centering or right-aligning long paragraphs should generally be avoided unless the design has a specific editorial reason.
Button labels are usually centered because the button is an interactive element with a clearly defined visual container.
+----------------------+
| GET STARTED |
+----------------------+
Buttons containing icons may use Auto Layout to maintain consistent spacing between the icon and label.
Navigation items are usually aligned consistently across a navigation bar. Depending on the navigation structure, labels may be left-aligned, centered, or arranged using Auto Layout.
HOME | PRODUCTS | SERVICES | CONTACTConsistency is more important than using a particular alignment in every situation.
Cards can use different alignment approaches depending on their purpose. Most informational cards use left alignment, while promotional cards may use centered content.
+---------------------------+
| Product Title |
| Description text goes |
| here with useful details. |
| |
| VIEW DETAILS |
+---------------------------+
Centered cards are commonly used for pricing plans, onboarding options, feature highlights, testimonials, and empty states.
+---------------------------+
| |
| ICON |
| |
| Premium Plan |
| |
| ₹1,999 / Month |
| |
| GET STARTED |
| |
+---------------------------+
Form interfaces typically use left-aligned labels, placeholders, helper text, and validation messages. Button labels are usually centered.
| Form Element | Common Alignment |
|---|---|
| Field Label | Left |
| Input Text | Left |
| Placeholder | Left |
| Helper Text | Left |
| Error Message | Left |
| Button Label | Center |
Hero sections frequently use centered typography when the design is promotional or visually focused. Left-aligned hero content is also common, especially when combined with an image or product illustration.
Centered Hero
DESIGN
BETTER PRODUCTS
Create modern experiences
with Figma.
GET STARTED
A left-aligned hero is useful when text needs to sit beside an image, illustration, product screenshot, or visual object.
+-------------------------------------------+
| Build Better Products | |
| | Product |
| Design modern digital | Image |
| experiences with Figma. | |
| | |
| GET STARTED | |
+-------------------------------------------+
Landing pages may combine multiple alignment patterns. For example, a hero can be centered, feature sections can be left-aligned, testimonials can be centered, and pricing data can use a combination of left and centered content.
The alignment should create a consistent visual rhythm across the entire page.
Testimonials can be left-aligned for a content-focused layout or centered for a more promotional design.
“This product helped our team
design faster and collaborate
more effectively.”
— Product Designer
The quote and author should have a clear relationship regardless of the chosen alignment.
Pricing cards frequently use centered alignment because plan names, prices, feature summaries, and CTA buttons form a compact promotional block.
+----------------------+
| PRO PLAN |
| |
| ₹1,999 |
| / MONTH |
| |
| Unlimited Projects |
| Priority Support |
| |
| GET STARTED |
+----------------------+
Prices can use different alignment approaches depending on the layout. In product cards, prices are often left-aligned or grouped with product information. In tables and financial interfaces, numerical values are often right-aligned for easier comparison.
Tables require deliberate alignment because users compare information across rows and columns.
| Column | Common Alignment |
|---|---|
| Name | Left |
| Description | Left |
| Quantity | Right or Center |
| Price | Right |
| Status | Center or Left |
| Actions | Center or Right |
Dashboards contain large amounts of information. Alignment should make metrics easy to compare and scan.
TOTAL USERS
12,450
MONTHLY REVENUE
₹8,45,000
ACTIVE ORDERS
3,240
Labels may be left-aligned while numbers may be right-aligned depending on the component design.
Charts use labels, legends, axis titles, values, and annotations. Alignment should support quick interpretation of the data.
E-commerce product cards usually use left alignment for product names and descriptions because this creates a predictable scanning pattern.
Wireless Headphones
Noise cancellation
₹4,999
4.8 ★
ADD TO CART
Promotional badges may use centered text within their badge container.
Mobile interfaces have limited screen width, making alignment especially important. Consistent left alignment often provides a strong visual edge that helps users scan content.
Centered alignment can be useful for onboarding screens, empty states, confirmation screens, and promotional content.
Alignment may change across breakpoints when the layout changes. A desktop hero may use left alignment beside an image, while the mobile version may center the content above the image.
Desktop
+-------------------------------+
| Text Content | Image |
| Left Align | |
+-------------------------------+
Mobile
+------------------+
| Text |
| Center |
| |
| Image |
+------------------+
Auto Layout can help create consistent spacing and positioning around aligned text. Text alignment and Auto Layout should be configured separately because alignment controls text positioning inside its text box while Auto Layout controls the relationship between child layers.
Auto Layout Frame
|
+-- Icon
|
+-- Text
|
+-- Text Alignment
|
+-- Button
Reusable components should have consistent text alignment rules. For example, all primary buttons can use centered labels while all card titles can use left alignment.
Consistent alignment reduces visual inconsistency and makes design systems easier to maintain.
Different component variants may require different alignment patterns.
| Component | Possible Alignment |
|---|---|
| Primary Button | Center |
| Text Button | Center or Left |
| Product Card | Left |
| Pricing Card | Center |
| Dashboard Metric | Left or Right |
| Empty State | Center |
| Form Field | Left |
Visual balance means that elements feel stable and appropriately distributed within the composition. Alignment provides invisible structural lines that help create this balance.
Left Edge
|
| Heading
| Paragraph
| Button
|
| Image
|
Right Edge
When multiple elements share an alignment edge, the interface often feels more organized.
Alignment lines are invisible guides that connect related elements. Designers use them to create structure across sections and components.
| Heading
| Paragraph
| Button
| Card
| Image
|
| All share the same left edge
This is one of the fundamental principles of visual design.
Grid systems provide columns and guides that help designers align content. Text alignment should work with the grid rather than fighting against it.
Grid
| | | | | |
|Text|Text|Text|Text|Text|
|____|____|____|____|____|
Consistent alignment to grid columns creates stronger page structure.
Alignment and spacing work together. Alignment establishes the position of content, while spacing establishes the distance between related elements.
Heading
|
| 16px
v
Paragraph
|
| 24px
v
Button
Changing alignment without reviewing spacing can create an unbalanced layout.
Padding determines the internal space between a component's boundary and its content. Alignment determines how text is positioned within that available area.
+---------------------------+
| Padding |
| Text |
| |
+---------------------------+
For example, a left-aligned card title can have consistent left padding from the card boundary.
Navigation bars often contain a logo, navigation links, search controls, profile information, and buttons. Alignment should establish a consistent horizontal structure.
Logo | Home | Products | Pricing | About | LoginAuto Layout can be used to manage the spacing between navigation elements while the text alignment remains consistent.
Sidebar navigation generally uses left-aligned labels because users scan the menu from a consistent starting edge.
Dashboard
Analytics
Orders
Customers
Settings
Logout
Icons should have consistent spacing from the text so that alignment remains predictable.
Breadcrumbs usually use left-to-right alignment because they represent a hierarchy or path.
Home / Products / UI Design / FigmaConsistent spacing between breadcrumb items helps maintain readability.
Search input text is generally left-aligned because users expect text input to begin from the left edge.
+--------------------------------+
| 🔍 Search products... |
+--------------------------------+
The search icon and text should be positioned using Auto Layout and consistent internal padding.
Input values are usually left-aligned. Special interfaces such as calculators, financial forms, or numerical dashboards may use different alignment rules.
Name
+----------------------+
| Manish |
+----------------------+
Email
+----------------------+
+----------------------+
Error messages are generally aligned with the corresponding input field. This creates a clear visual relationship between the error and the field that caused it.
Email
+----------------------+
| invalid-email |
+----------------------+
Please enter a valid email address.
Helper text is usually left-aligned with the input field or content it describes. Keeping the same alignment edge makes the relationship easier to understand.
Empty states often use centered alignment because the screen contains a single primary message and action.
[ Illustration ]
No Projects Yet
Create your first project
to get started.
CREATE PROJECT
Onboarding screens frequently use centered headings, descriptions, illustrations, and CTA buttons because the design is focused on a single guided action.
Login screens may use centered or left-aligned layouts depending on the product's visual style.
Welcome Back
Email
+----------------+
Password
+----------------+
[ SIGN IN ]
Centered layouts can create a focused experience, while left-aligned layouts can feel more structured and form-oriented.
Modal dialogs generally use left-aligned headings and body text because this supports readability. Action buttons may be right-aligned or grouped according to the product's design system.
+--------------------------------+
| Delete Account |
| |
| Are you sure you want to |
| permanently delete your account?|
| |
| Cancel Delete |
+--------------------------------+
Alerts should have a clear relationship between their icon, title, description, and actions. Text is usually left-aligned while the alert itself can be positioned according to the layout.
Tooltips often use left-aligned text because the content is short but may span multiple lines. Consistent left alignment creates a predictable reading edge.
Notifications commonly use left-aligned titles and descriptions. Action controls may be placed beside or below the text depending on the component design.
Quotes may use left, center, or special editorial alignment depending on the visual style. Centered quotes are common in marketing pages, while left-aligned quotes work well in content-heavy layouts.
Long-form articles generally use left-aligned text because it creates a predictable reading edge. Centered paragraphs can become difficult to scan when the content is long.
Article Heading
Paragraph paragraph paragraph
paragraph paragraph paragraph
paragraph paragraph paragraph
Subheading
Paragraph paragraph paragraph
paragraph paragraph paragraph
Editorial designs may use left, right, centered, or justified alignment more creatively. Newspapers, magazines, brochures, and publication layouts often experiment with alignment while maintaining strong typographic hierarchy.
Readability should always be considered when selecting alignment. Left alignment generally provides a predictable starting point for each line, while centered and right-aligned paragraphs can create irregular starting positions.
Accessible typography should be easy to read and understand. Alignment choices should not make content unnecessarily difficult to scan.
Text alignment may need to adapt to different writing systems and language directions. Interfaces supporting right-to-left languages may require appropriate layout and alignment behavior rather than assuming a left-to-right structure.
Always test actual translated content because text length and direction can change the visual layout.
Right-to-left languages require special consideration for text direction, layout direction, icons, navigation, and alignment. Designers should use direction-aware layouts rather than simply moving every element manually.
LTR Example
Text → →
RTL Example
← ← Text
RTL design should be tested using actual RTL language content.
Responsive components may change alignment when screen size changes. For example, a desktop card may use left-aligned content beside an image, while the mobile version may center the content.
Desktop
[Text Content] [Image]
Mobile
[Image]
[Centered Text Content]
Constraints help determine how layers behave when their parent frame changes size. Text alignment determines how the content is positioned within its own text container, while constraints influence how the layer responds to frame resizing.
Auto Layout is useful for creating components where text and other elements need to maintain consistent spacing. Text alignment should be configured according to the content role.
Card
|
+-- Icon
|
+-- Heading
|
+-- Description
|
+-- Button
Auto Layout controls spacing.
Text Alignment controls text positioning.
A design system should define common alignment rules for recurring components. This prevents designers from choosing arbitrary alignment values on every screen.
Design System
|
+-- Buttons: Center
+-- Form Labels: Left
+-- Body Text: Left
+-- Empty States: Center
+-- Prices: Right where appropriate
+-- Cards: Left or Center by variant
Variants can define different alignment behaviors while keeping components consistent.
| Component | Variant | Alignment |
|---|---|---|
| Button | Primary | Center |
| Button | Text | Center or Left |
| Card | Standard | Left |
| Card | Promotional | Center |
| Empty State | Default | Center |
Text Styles primarily store typography properties such as font family, weight, size, line height, and Letter Spacing. Alignment and layout behavior should be managed separately according to the component and layout requirements.
This distinction helps prevent a typography style from becoming unnecessarily tied to a particular layout.
During developer handoff, designers should ensure that text alignment is clearly visible and consistent in the component. Developers need to understand whether a text element is left-, center-, or right-aligned and how it should behave responsively.
Figma Design
|
v
Text Alignment
|
v
Component Structure
|
v
Developer Handoff
|
v
HTML / CSS / App UI
On the web, horizontal text alignment commonly maps to the CSS text-align property.
Left:
.text {
text-align: left;
}
Center:
.text {
text-align: center;
}
Right:
.text {
text-align: right;
}
Justified:
.text {
text-align: justify;
}
CSS Flexbox has separate concepts for aligning the text content and positioning the element itself. The CSS text-align property controls inline text alignment, while Flexbox properties such as justify-content and align-items control the positioning of flex items.
.container {
display: flex;
justify-content: center;
align-items: center;
}
.text {
text-align: center;
}
This distinction is important when translating a Figma design into a real interface.
Horizontal Text Alignment and vertical positioning are different concepts. Horizontal alignment determines whether text sits toward the left, center, or right side of a text container. Vertical positioning determines how content sits within available vertical space.
+----------------------+
| |
| TEXT |
| |
+----------------------+
Text positioned vertically
within the available container.
Buttons, cards, navigation bars, inputs, and list items frequently require vertical centering. This is especially important when text appears next to icons.
+-------------------------+
| [Icon] Text |
+-------------------------+
Icon and text
are vertically centered.
When icons appear beside text, the icon and text should have a consistent visual relationship. Auto Layout can help maintain the spacing, while alignment settings help keep the text positioned correctly.
[Icon] Download
[Icon] Settings
[Icon] Share
Do not use spaces inside the text string to create icon gaps. Use layout spacing instead.
Buttons containing icons require careful alignment to avoid visual imbalance.
+--------------------------+
| [Icon] Download |
+--------------------------+
Use Auto Layout for the icon-to-text gap and component padding. This makes the component easier to maintain.
Long headings can behave differently when alignment changes. A centered heading may produce visually uneven line lengths, while a left-aligned heading creates a stable starting edge.
Centered:
Create Better
Digital Experiences
Left:
Create Better
Digital Experiences
Choose the alignment that best supports the visual hierarchy and reading flow.
Alignment does not determine where text wraps, but it changes how the wrapped lines appear within the text box.
Left:
Create Better
Digital Experiences
Center:
Create Better
Digital Experiences
Right:
Create Better
Digital Experiences
Always check wrapping with real content.
Start
|
v
What type of content?
|
+-- Long-form text ----> Left
|
+-- Short promotional -> Center
|
+-- Numerical data ----> Right where appropriate
|
+-- Editorial content -> Left / Justified
|
v
Check Component
|
v
Check Grid
|
v
Check Responsive Layout
|
v
Finalize Alignment
Understand Content
|
v
Choose Layout
|
v
Set Text Box
|
v
Choose Alignment
|
v
Set Typography
|
v
Check Spacing
|
v
Check Grid Alignment
|
v
Check Auto Layout
|
v
Test Real Content
|
v
Test Responsive Layout
|
v
Create Reusable Component
|
v
Developer Handoff
Create a complete landing page in Figma and use different text alignment patterns throughout the design.
Create a mobile login screen containing a logo, heading, supporting description, email field, password field, login button, forgot-password link, and registration link.
LOGO
Welcome Back
Enter your details to continue.
Email
+--------------------+
Password
+--------------------+
SIGN IN
Forgot Password?
Experiment with both centered and left-aligned versions and compare their readability and visual balance.
Create a dashboard containing navigation, metric cards, a data table, filters, and charts.
Text Alignment controls how text is positioned within its text container, such as left, center, right, or justified alignment.
The common types are left, center, right, and justified alignment.
Left alignment is commonly used for body text because it provides a predictable starting edge for each line.
Center alignment is useful for short headings, hero sections, onboarding screens, empty states, promotional content, and other focused compositions.
Right alignment can be useful for numerical information, prices, financial data, and specific layout compositions.
Justified alignment distributes text across the available width so that lines generally align with both sides of the text container.
No. Text Alignment changes the position of text within its container; it does not change the font size.
No. Letter Spacing controls character spacing, while Text Alignment controls the positioning of the text block.
Yes. Changing alignment can affect the visual balance and wrapping behavior of responsive components.
Manual spaces are unreliable across fonts, screen sizes, and responsive layouts. Proper alignment controls and Auto Layout provide more reliable results.
| Concept | Meaning |
|---|---|
| Left Alignment | Positions text against the left side of the text container |
| Center Alignment | Positions text around the center of the text container |
| Right Alignment | Positions text against the right side |
| Justified Alignment | Distributes text across the available line width |
| Text Box | Container that holds text content |
| Auto Layout | Controls relationships and spacing between layers |
| Grid | Provides structural alignment guides |
| Line Height | Controls vertical spacing between lines |
| Letter Spacing | Controls horizontal spacing between characters |
| Responsive Alignment | Alignment behavior across different screen sizes |
Text Alignment is a fundamental Figma skill that helps designers organize content, establish hierarchy, improve readability, and create visually balanced interfaces. Left, center, right, and justified alignment each have different use cases, and the best choice depends on the content, component, layout, and user experience.
Professional designers should consider Text Alignment together with typography, spacing, grids, Auto Layout, components, responsive behavior, accessibility, and content length. Instead of manually positioning text with spaces or arbitrary offsets, designers should use Figma's alignment controls and structured layout systems.
When Text Alignment is used consistently across a design system, websites, mobile applications, dashboards, forms, cards, navigation, and responsive layouts become easier to understand, maintain, and implement.
For structured and practical Figma UI/UX training, visit JustAcademy Figma Training and Register for Figma Course Demo.
